<script>
import { ref, h } from 'vue'
export default {
  // setup它还可以返回一个函数，函数里面返回一个虚拟dom
  // slots 它用于获取插槽中的数据
  setup(props, { slots }) {
    const count = ref(200)

    // console.log(slots)

    const addCount = () => {
      count.value++
    }

    return () => {
      // h函数
      // 参数1：标签或组件(虚拟dom对象)
      // 参数2：属性
      // 参数3：单个也可以是多个[数组] -- 子元素
      return h('div', { style: 'color:red' }, [
        slots.header ? h(slots.header) : h('div', {}, '默认头部'),
        h('div', {}, '我是子组件 --' + count.value),
        slots.default ? h(slots.default) : h('div', {}, '内容'),
        slots.icon ? h(slots.icon, { a: 1 }) : h('div', {}, 'icon'),
        h(
          'button',
          {
            onClick: addCount
          },
          '++count++'
        )
      ])
    }
  }
}
</script>

<style lang="scss" scoped></style>
